<template>
  <u-popup
    :value="value"
    mode="bottom"
    safe-area-inset-bottom
    @close="$emit('input', false)"
  >
    <view class="popBox">
      <view class="tab">
        <view
          class="tabItem"
          v-for="item of typeList"
          :key="item.id"
          :class="[getClass('index', item.id)]"
          @click="change('index', item.id)"
        >
          <view class="tabBox">
            {{ item.name }}
            <view class="icon"></view>
          </view>
        </view>
      </view>

      <template v-if="index">
        <view class="subtit">业绩时间</view>
        <view class="tab">
          <view
            class="tabItem tabItem2"
            v-for="item of timeList"
            :key="item.id"
            :class="[getClass('time_index', item.id)]"
            @click="change('time_index', item.id)"
          >
            <view class="tabBox">
              {{ item.name }}
              <view class="icon"></view>
            </view>
          </view>
        </view>
        <view class="subtit">自定义</view>
        <view class="time">
          <view
            @click="time_el = 'start_time'"
            :class="['input', time_el == 'start_time' ? 'on' : '']"
            >{{ start_time ? start_time : "开始时间" }}</view
          >
          <view class="test">至</view>
          <view
            @click="time_el = 'end_time'"
            :class="['input', time_el == 'end_time' ? 'on' : '']"
            >{{ end_time ? end_time : "结束时间" }}</view
          >
        </view>
      </template>
    </view>

    <timePicker
      ref="timePicker"
      type="time"
      :params="getParams"
      @change="changeTime"
      :defaultTime="defaultTime"
    ></timePicker>

    <view class="btn">
      <view class="button" @click="submit">确定</view>
    </view>
  </u-popup>
</template>

<script>
import timePicker from "./u-picker.vue";

export default {
  components: {
    timePicker
  },

  props: {
    value: {
      type: Boolean,
      default: false
    },

    timeList: {
      type: Array,
      default() {
        return [];
      }
    }
  },

  watch: {
    time_el(e) {
      if (e) this.time_index = 0;
    }
  },

  data() {
    return {
      typeList: [
        { name: "月份选择", id: 0 },
        { name: "自定义时间", id: 1 }
      ],
      index: 0,

      time_index: 0,
      start_time: 0,
      end_time: 0,
      month_time: "",
      time_el: "",

      defaultTime: ""
    };
  },

  mounted() {
    this.defaultTime = this.$u.timeFormat(new Date().getTime(), "yyyy-mm");
  },

  methods: {
    change(el, id) {
      if (id === this[el]) {
        return;
      }
      this[el] = id;

      if (el == "time_index") {
        this.time_el = "";
        this.start_time = 0;
        this.end_time = 0;
      }

      if (el == "index" && !id) this.changeTime();
    },
    close() {
      this.$emit("input", false);
    },

    changeTime() {
      let { timePicker } = this.$refs,
        { index, time_el } = this;

      if (!index) {
        const { year, month } = timePicker.getResult();
        this.month_time = `${year}-${month}`;
      } else {
        if (!time_el) return this.$utils.toast("请先选择开始结束选项");
        const { year, month, day } = timePicker.getResult();
        this.time_index = 0;
        this[time_el] = `${year}-${month}-${day}`;
      }
    },

    submit() {
      let { index, start_time, end_time, month_time, time_index } = this,
        parmas = {};
      switch (index) {
        case 0:
          parmas = {
            start_time: 0,
            end_time: 0,
            month_time
          };

          this.defaultTime = month_time;
          break;

        case 1:
          if (!time_index && !start_time)
            return this.$utils.toast("请至少选择一样");

          if (time_index) {
            parmas = {
              start_time: time_index,
              end_time: 0,
              month_time: ""
            };
          } else {
            parmas = {
              start_time: start_time,
              end_time: end_time,
              month_time: ""
            };
          }
          this.defaultTime = "";
          break;
      }

      parmas.type = index;
      this.$emit("callback", parmas);
      this.close();
    }
  },

  computed: {
    getParams() {
      let params = {
        year: true,
        month: true,
        day: false,
        hour: false,
        minute: false,
        second: false
      };

      if (this.index) params.day = true;
      return params;
    },

    getClass() {
      return (el, id) => {
        return id === this[el] ? "on" : "";
      };
    }
  }
};
</script>

<style lang="less" scoped>
.tab {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  padding: 0;
  background: #fff;
}

.tabItem {
  position: relative;
  overflow: hidden;
  text-align: center;
  margin-right: 60rpx;
  height: 100rpx;
  line-height: 100rpx;

  .icon {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 16rpx;
    height: 6rpx;
    background: #f0250e;
    display: none;
  }

  .tabBox {
    font-weight: bold;
  }

  &.on {
    .icon {
      display: block;
    }
  }
}

.tabItem2 {
  margin-right: 24rpx;
  padding: 8rpx 24rpx;
  height: auto;
  line-height: 1.2;
  border-radius: 32px;
  border: 2rpx solid #8c8c8c;

  .tabBox {
    font-weight: normal;
    display: block;
  }

  &.on {
    .icon {
      display: none;
    }

    border-color: #f0250e;
    background: #fcedeb;
    color: #f0250e;
  }
}

.tabBox {
  position: relative;
  display: inline-block;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  max-width: 100%;
}

.popBox {
  padding: 0 36rpx;
}

.btn {
  padding: 10rpx 36rpx;
  background: #fff;
  border-top: 2rpx solid #f8f8f8;

  .button {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f0250e;
    border-radius: 32px;
    color: #fff;
    font-weight: bold;
    height: 76rpx;
  }
}

.subtit {
  padding: 20rpx 0;
  font-size: 24rpx;
  color: #8c8c8c;
}

.time {
  display: flex;
  align-items: center;

  .test {
    padding: 0 42rpx;
    font-size: 30rpx;
    font-weight: bold;
  }

  .input {
    padding: 20rpx 0;
    flex: 1;
    overflow: hidden;
    text-align: center;
    border-bottom: 4rpx solid #8c8c8c;
    color: #c6c6c6;
    font-weight: bold;
    font-size: 34rpx;

    &.on {
      color: #f0250e;
      border-bottom-color: #f0250e;
    }
  }
}
</style>
